<template>
  <el-row style="padding-top: 20px">
    <el-col :span="16" :offset="3">
      <el-form label-width="140px" size="large">
        <el-form-item label="smtp服务器">
          <el-input v-model="selectedMailConf.smtpServer" />
        </el-form-item>
        <el-form-item label="smtp服务器端口">
          <el-input v-model="selectedMailConf.smtpPort" />
        </el-form-item>

        <el-form-item label="发件邮箱名称">
          <el-input v-model="selectedMailConf.mailAccount" />
        </el-form-item>

        <el-form-item label="发件邮箱密码">
          <el-input v-model="selectedMailConf.mailPassword" />
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
  <el-row>
    <el-col :offset="12" :span="7" align="right">
      <el-button
        @click="(istestMail = !istestMail), (mailTestResult = '')"
        color="#F2F6FC"
        round
        >测试邮件基本配置</el-button
      >
      <el-button type="primary" @click="nextStep">下一步</el-button>
    </el-col>
  </el-row>

  <el-row v-if="istestMail" style="padding-top: 20px">
    <el-col :span="16" :offset="3">
      <el-form-item label="测试收件人邮箱" size="large">
        <el-input v-model="selectedMailConf.receiverList" />
      </el-form-item>
    </el-col>
  </el-row>
  <el-row v-if="istestMail">
    <el-col
      :span="7"
      :offset="3"
      :style="{ color: testResultColor, fontSize: '15px' }"
      >{{ mailTestResult }}</el-col
    >
    <el-col :span="3" :offset="6">
      <el-button
        style="float: right"
        type="primary"
        round
        size="default"
        @click="sendTestMail"
        >发送测试邮件</el-button
      ></el-col
    >
  </el-row>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import { useMailConfStore } from "@/stores/mailConfStore";
import { storeToRefs } from "pinia";
import { sendTestMailApi } from "@/api/sunnymail";
import { ElMessage } from "element-plus";

const mailConfStore = useMailConfStore();
const { selectedMailConf, nowStep } = storeToRefs(mailConfStore);

const istestMail = ref(false);
const testResultColor = ref("#67C23A");
const mailTestResult = ref("");

const nextStep = () => {
  //记得调用ref对象的值要用.value
  nowStep.value++;
};

const sendTestMail = () => {
  sendTestMailApi(selectedMailConf.value)
    .then(({ data }) => {
      console.log(data);
      mailTestResult.value = "Success";
      testResultColor.value = "#67C23A";
      ElMessage.success(data);
    })
    .catch(() => {
      mailTestResult.value = "Fail";
      testResultColor.value = "#F56C6C";
      ElMessage.error("测试邮件发送失败，请检查日志！");
    });
};
</script>

<style scoped>
:deep(.el-form-item__label) {
  font-size: 16px;
}
</style>
